
<template>
    <div>
        <table class="mytable">
            <tr>
                <th>款式信息</th>
                <th>面料成分</th>
                <th>尺码</th>
                <th>指数</th>
                <th>页面尺码推荐</th>
                <th>运营部确认</th>
                <th>设计主题</th>
                <th>纹祥描述</th>
                <th>主题/纹祥图</th>
                <th>设计部确认</th>
                <th>版型工艺</th>
                <th>穿法特点</th>
                <th>主要面料特点</th>
                <th>填充物</th>
                <th>注意事项</th>
                <th>工艺细节解说</th>
                <th>产品部确认</th>
                <th>产品描述</th>
                <th>图片配字</th>
                <th>部件细节</th>
                <th>页面温馨提示</th>
                <th>营销部确认</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    <div style="display:flex">
                        <div style="margin-right:20px">
                            <el-image
                                src="https://ssy.13yu.com/Uploads/2021-12-03/61a97e58be2d3.png"
                                style="width:100px"
                                :preview-src-list="['https://ssy.13yu.com/Uploads/2021-12-03/61a97e58be2d3.png']"
                            ></el-image>
                        </div>
                        <div>
                            <div>
                                    <span>名称：虎喝新春</span>
                                        <el-button type="text" @click="dialogVisible = true">
                                            <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                                        </el-button>
                            </div>
                            <div>SHF152784</div>
                            <div>短比甲</div>
                            <div>编码：123456</div>
                        </div>
                    </div>
                </td>
                <td>面料成分</td>
                <td style="padding:0">
                    <table class="mytable">
                        <tr>
                            <th>尺码/部位</th>
                            <th>前衣长(肩点)</th>
                            <th>胸围</th>
                            <th>下摆</th>
                            <th>肩宽</th>
                            <th>领高</th>
                        </tr>
                        <tr>
                            <td>XS</td>
                            <td>62</td>
                            <td>89</td>
                            <td>110</td>
                            <td>25</td>
                            <td>2.5</td>
                        </tr>
                        <tr>
                            <td>S</td>
                            <td>62</td>
                            <td>89</td>
                            <td>110</td>
                            <td>25</td>
                            <td>2.5</td>
                        </tr>
                        <tr>
                            <td>M</td>
                            <td>62</td>
                            <td>89</td>
                            <td>110</td>
                            <td>25</td>
                            <td>2.5</td>
                        </tr>
                        <tr>
                            <td>L</td>
                            <td>62</td>
                            <td>89</td>
                            <td>110</td>
                            <td>25</td>
                            <td>2.5</td>
                        </tr>
                        <tr>
                            <td>XL</td>
                            <td>62</td>
                            <td>89</td>
                            <td>110</td>
                            <td>25</td>
                            <td>2.5</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div>
                        <div>指数</div>

                        <div>
                            <el-button type="text" @click="dialogVisibleIndex = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td style="padding:0;width:360px">
                    <table class="mytable">
                        <tr>
                            <th>身高/净腰围</th>
                            <th>64-68</th>
                            <th>69-72</th>
                            <th>73-76</th>
                            <th>77-80</th>
                            <th>81-84</th>
                        </tr>
                        <tr>
                            <td>150-155</td>
                            <td>XS</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>156-160</td>
                            <td>XS</td>
                            <td>S</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>161-165</td>
                            <td>-</td>
                            <td>S</td>
                            <td>M</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>166-170</td>
                            <td>-</td>
                            <td>-</td>
                            <td>M</td>
                            <td>L</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>171-175</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>L</td>
                            <td>XL</td>
                        </tr>
                    </table>
                </td>
                <td>运营部确认</td>
                <td>
                    <div>
                        <div>设计主题</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>纹祥描述</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <el-image
                            src="https://ssy.13yu.com/Uploads/2021-12-03/61a97e58be2d3.png"
                            style="width:200px"
                            :preview-src-list="['https://ssy.13yu.com/Uploads/2021-12-03/61a97e58be2d3.png']"
                        ></el-image>
                        <div>
                            <el-button type="text" @click="dialogVisibleImage = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>设计部确认</td>
                <td>
                    <div>
                        <div>版型工艺</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>穿法特点</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>主要面料特点</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>填充物</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>注意事项</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>工艺细节解说</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>产品部确认</td>
                <td>
                    <div>
                        <div>产品描述</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>图片配字</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>部件细节</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>
                    <div>
                        <div>页面温馨提示</div>

                        <div>
                            <el-button type="text" @click="dialogVisible = true">
                                <i class="el-icon-edit-outline" style="font-size: 20px"></i>
                            </el-button>
                        </div>
                    </div>
                </td>
                <td>营销部确认</td>
                <td>
                    <el-button type="text" @click="onAffirm">确认</el-button>
                    <el-button type="text" @click="onAffirm" style="color:red">取消确认</el-button>
                </td>
            </tr>
        </table>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div style="display:flex">
                <span>页面温馨提示：</span>
                <div style="width:80%">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisibleImage"
            width="30%"
            :before-close="handleClose"
        >
            <div style="display:flex">
                <span>主题/纹祥图：</span>
                <div style="width:80%">
                    <el-upload
                        class="avatar-uploader"
                        action="/"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="images" :src="images" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisibleIndex"
            width="30%"
            :before-close="handleClose"
        >
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>版型指数：</span>
                <div style="width:80%">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>弹力指数：</span>
                <div style="width:80%">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>硬度指数：</span>
                <div style="width:80%">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div style="display:flex;align-items: center;margin-bottom: 10px;">
                <span>厚度指数：</span>
                <div style="width:80%">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
        
<script>
export default {
    data() {
        return {
            dialogVisible: false,   // 编辑输入框
            dialogVisibleImage: false,   // 编辑纹祥图
            dialogVisibleIndex: false, // 编辑指数
            images: "",
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            value: ''
        }
    },
    methods: {
        beforeAvatarUpload(file) {
            this.file = file;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                let _base64 = reader.result;
                this.images = _base64;
            };
            return false;
        },

        onAffirm() {
            this.$confirm('即将确认此款式?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '确认成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: ''
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.mytable {
    border: 1px solid #ebeef5;
    min-height: 25px;
    line-height: 25px;
    text-align: center;
    border-collapse: collapse;
    padding: 2px;
    > tr {
        > th {
            border: 1px solid #ebeef5;
            font-size: 12px;
            color: #909399;
            padding: 10px;
        }
        > td {
            border: 1px solid #ebeef5;
            font-size: 12px;
            color: #909399;
            padding: 10px;
        }
    }
}
</style>